<!--  -->
<template>
  <div id="swiper">
    <div class="wordTitle">
      {{ DigTitle }} (单选)
    </div>
    <div class="contentBox">
      <div class="contenSon" v-for="(item,index) in newTabList" :key="index" @click.stop.prevent="getItemDetail(item,index)">
        <el-radio v-model="item.id" :label="setLabel">{{ item.nickName }}</el-radio>
      </div>
    </div>
    <div class="pageTion">
      <el-pagination
        :small="true"
        :background="true"
        :page-size.sync="pageSize"
        @current-change="handleCurrentChange"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    tableList: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: 0
    },
    DigTitle: {
      type: String,
      default: ''
    },
    tagTitle: {
      type: String,
      default: ''
    },
    // 修改时默认选中的温湿度设备
    defaultCheckedNum: {
      type: Number,
      default: 0
    }
  },
  data () {
    // 这里存放数据
    return {
      setLabel: 0,
      showForDevice: false,
      isShowIcon: false,
      clickPageShow: false,
      pageSize: 6,
      newTabList: this.tableList,
      arrList: [],
      tagItem: this.tagTitle,
      mySelf: false
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    tableList: {
      handler (newVal, oldVal) {
        this.newTabList = newVal
      },
      immediate: true
    },
    defaultCheckedNum: {
      handler (nVal) {
        this.setLabel = nVal
      },
      immediate: true
    }
  },
  // 方法集合
  methods: {
    closeAddGroup () {
      this.showForDevice = false
    },
    handleCurrentChange (val) {
      this.$emit('handleCurrentChange', 6, val)
    },
    getItemDetail (item) {
      this.setLabel = item.id
      sessionStorage.setItem('currentTah', this.setLabel)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    // this.arrList = sessionStorage.getItem()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  }
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类

  #swiper {
    height: 300px;
    padding: 5px;
    position: relative;
    background-color: #BBFFFF;
    .fade-enter-active, .fade-leave-active {
      transition: opacity 0.5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active 在 <2.1.8 版本中 */ {
      opacity: 0;
    }
    .wordTitle {
      padding: 3px 10px;
      font-size: 20px;
      font-weight: 400;
      width: 100%;
      text-align: center;
    }
    .rightIcon {
      background-color: #000;
      width: 50px;
      height: 50px;
      position: absolute;
      top: 50%;
      right: 5px;
      transform: translateY(-50px);
    }
    .leftIcon {
      background-color: #000;
      width: 50px;
      height: 50px;
      position: absolute;
      left: 5px;
      top: 50%;
      transform: translateY(-50px);
    }

    .contentBox {
      width: 100%;
      height: 85%;
      display: grid;
      position: relative;
      grid-template-columns: 32% 32% 32%;
      grid-template-rows: 40% 40% 40%;
      gap: 10px;
      .contenSon {
        box-shadow: 0 2px 12px 0 ;
        text-align: center;
        word-wrap: break-all;
        line-height: 128px;
      }
      .contenSon:hover {
        position: relative;
        top: 5px;
      }
    }
    .pageTion {
      position: absolute;
      bottom: 10px;
    }
  }
</style>
